<template>
    <div class="app-container">
      <div class="filter-container">
        <el-input
         :disabled="userState"
          v-model="phone"
          placeholder="会员手机号"
          style="width: 200px"
          class="filter-item"
          @keyup.enter.native="queryBtn"
        />
        <el-button
          v-waves
          class="filter-item"
          type="primary"
          icon="el-icon-search"
          style="margin-left: 5px"
          @click="queryBtn"
        >
          查询
        </el-button>
          <el-button class="filter-item" style="margin-left: 10px;" type="primary" icon="el-icon-edit" @click="handleCreate">
          添加会员
        </el-button>
     
    
      <span style="float: right;
      margin-right: 20px;
      font-weight: 600;color: #494949;">当前账号：<span style="color: #ff770f;">{{title}}</span></span>
    
    </div>
  
      
  
      <el-table
        :header-cell-style="{ background: '#ffffff', color: '#000000' }"
        :key="tableKey"
        :row-class-name="tableRowClassName"
        v-loading="listLoading"
        :data="list"
        :row-key="'id'"
        :stripe=true
        ref="parkfieldTable"
        @selection-change="handleTableChange"
        border
        fit
        highlight-current-row
        style="
          width: 100%;
          font-size: 15px;
          box-shadow: 1px 1px 8px #cdcdcd;
          border: 0px;
        "
        :default-sort="{ prop: 'time', order: 'descending' }"
      >
        <el-table-column
          label="ID"
          prop="id"
          sortable="custom"
          align="center"
          width="80"
          :class-name="getSortClass('id')"
        >
          <template slot-scope="scope">
            <span>{{ scope.row.id }}</span>
          </template>
        </el-table-column>
  
        <el-table-column label="用户Id" min-width="160px">
          <template slot-scope="scope">
            <span>{{ scope.row.openId }}</span>
          </template>
        </el-table-column>

        <el-table-column label="姓名" min-width="160px">
          <template slot-scope="scope">
            <span>{{ scope.row.name }}</span>
          </template>
        </el-table-column>

        <el-table-column label="手机号" min-width="160px">
          <template slot-scope="scope">
            <span>{{ scope.row.phone }}</span>
          </template>
        </el-table-column>
  
        <el-table-column label="身份证号" min-width="120px">
          <template slot-scope="scope">
            <span>{{ scope.row.cardNo }}</span>
          </template>
        </el-table-column>

        
        <el-table-column label="会员状态" min-width="100px">
        <template slot-scope="{ row }">
          <el-tag
            v-if="row.memberStatus == 1"
            size="medium"
            type="Info"
            style="font-size: 14px"
            >正常</el-tag
          >
          <el-tag v-else size="medium" type="danger" style="font-size: 14px">
             异常
        </el-tag>
        </template>
      </el-table-column>

        <el-table-column label="停车场" min-width="450px">
        <template slot-scope="{ row }">
          <el-tag
            v-if="row.parkfieldIds == 'null'"
            size="medium"
            type="Info"
            style="font-size: 14px"
            >全部</el-tag
          >
          <el-tag v-else size="medium" type="Info" style="font-size: 14px">{{
            row.parkfieldIds.replace(/,/g,';  ')
          }}</el-tag>
        </template>
      </el-table-column>

      <el-table-column label="充值余额" min-width="120px">
          <template slot-scope="scope">
            <span>{{ scope.row.depositAmount }}</span>
          </template>
        </el-table-column>

        <el-table-column label="赠送余额" min-width="120px">
          <template slot-scope="scope">
            <span>{{ scope.row.bounsAmount }}</span>
          </template>
        </el-table-column>

  
        <el-table-column label="创建时间" min-width="120px">
          <template slot-scope="scope">
            <span>{{ sub(scope.row.createDate) }}</span>
          </template>
        </el-table-column>
  
        <el-table-column
        label="操作"
        align="center"
        width="200"
        class-name="small-padding fixed-width">
        <template slot-scope="{ row }">
          <el-button type="success" size="mini" @click="handleUpdate(row)">
            <i class="el-icon-edit"></i>
            充值
          </el-button>
          <el-button type="danger" size="mini" @click="handleDelete(row)">
            <i class="el-icon-edit"></i>
            删除
          </el-button>
        </template>
      </el-table-column>

  
      </el-table>
  
      <el-row>
        <el-col :span="24" class="page-tool">
          <el-pagination
            layout="total,sizes,prev, pager,next,jumper"
            style="margin-top: 10px"
            :page-size="pageSize"
            :total="total"
            :page-sizes="[10, 20, 30, 40]"
            @size-change="handlePageChange"
            @current-change="handleNoChange"
          ></el-pagination>
        </el-col>
      </el-row>
  
   <el-dialog :title="dialogTitle" :visible.sync="dialogFormVisible" :width="'722px'">
        <el-form :model="form" ref="form">

          <el-form-item label="姓名" :label-width="labelWidth" required>
            <template>
              <el-col :span="8">
                <el-form-item prop="name">
                 <el-input v-model="name">
                 </el-input>
                </el-form-item>
              </el-col>
             
            </template>
          </el-form-item>

          <el-form-item label="手机号" :label-width="labelWidth" required>
            <template>
              <el-col :span="8">
                <el-form-item prop="phone">
                 <el-input v-model="phone">
                 </el-input>
                </el-form-item>
              </el-col>
             
            </template>
          </el-form-item>


          <el-form-item label="身份证号" :label-width="labelWidth" required>
            <template>
              <el-col :span="8">
                <el-form-item prop="cardNo">
                 <el-input v-model="cardNo">

                 </el-input>
                </el-form-item>
              </el-col>
            </template>
          </el-form-item>

          <el-form-item label="停车场" :label-width="labelWidth" required>
            <template>
              <el-col :span="18">

                <el-select @change="totalParkfield" style="width:500px" v-model="parkfieldIds" filterable multiple placeholder="请选择">
                  <el-option :key="key" label="全部" :value="key"></el-option>
                  <el-option
                    v-for="parkfield in parkfieldList"
                    :key="parkfield.id"
                    :label="parkfield.name"
                    :value="parkfield.id">
                  </el-option>
                </el-select>


              </el-col>
             
            </template>
          </el-form-item>

       

        </el-form>
       <div slot="footer" class="dialog-footer">
          <el-button @click="dialogFormVisible = false">取 消</el-button>
          <el-button type="primary" @click="updateParkfield()">添加</el-button>
        </div>
      </el-dialog>





      <el-dialog title="会员充值" :visible.sync="memberVisible" :width="'722px'">
        <el-form :model="list" ref="form2">
          <el-form-item label="手机号" :label-width="labelWidth" required>
              <el-col :span="8">
                <el-form-item prop="phone">
                 <el-input disabled v-model="phone"></el-input>
                </el-form-item>
              </el-col>
          </el-form-item>
          <el-form-item label="身份证号" :label-width="labelWidth" required>
            <template>
              <el-col :span="8">
                <el-form-item prop="cardNo">
                 <el-input disabled v-model="cardNo">
                 </el-input>
                </el-form-item>
              </el-col>
            </template>
          </el-form-item>

          <el-form-item label="停车场" :label-width="labelWidth" required>
            <template>
              <el-col :span="18">
                <el-form-item prop="parkfieldIds">
                 <el-input type="textarea" :autosize="{ minRows: 2, maxRows: 4}" disabled v-model="parkfieldIds">
                 </el-input>
                </el-form-item>
              </el-col>
            </template>
          </el-form-item>


          <el-row style="margin-left: 20px;">
            <!-- <el-col :span="6">
                <el-radio style="margin-left:50px;margin-top: 10px;" v-model="radio1" label="1">方案1</el-radio>

        </el-col>  -->
          <el-col :span="8">
          <el-form-item label="充值金额(元)" label-width="100px">
                <el-input v-model="depositAmount" auto-complete="off" style="width:80%"></el-input>
          </el-form-item>
        </el-col> 

        <el-col :span="8">
          <el-form-item label="赠送金额(元)" label-width="100px">
                <el-input v-model="bonusAmount" auto-complete="off" style="width:80%"></el-input>
          </el-form-item>
        </el-col> 
    </el-row>




        </el-form>
       <div slot="footer" class="dialog-footer">
          <el-button @click="memberVisible = false">取 消</el-button>
          <el-button type="primary" @click="lcdepositrecord()">充值</el-button>
        </div>
      </el-dialog>



      
  
      
    </div>
  </template>
  
  <style>
  
  .page-tool {
    background: rgb(237, 231, 231);
  }
  
  .page-tool div {
    text-align: right;
  }
  
  .lock-btn {
    margin-bottom: 5px;
    margin-top: -10px;
  }
  .operateBtn {
    font-size: 18px;
    width: 32px;
    height: 32px;
    padding: 0;
  }
  
  .el-table .warning-row {
    background: #fff5ee;
  }
  .el-table__body tr:hover > td {
    background-color: #fdc091;
  }
  .el-table__body tr.current-row > td {
    background-color: #fdc091;
  }
  </style>
  
  
  <script>

  import waves from "@/directive/waves"; // waves directive
  
  import { loadParkfieldsApi,loadManagerApi} from "@/api/loadParkfields";
  import { lcchargememberApi,chargememberApi,lcdepositrecordApi,handleDeleteApi } from "@/api/member";
  
  import { getNickName, getTestUserName } from "../../utils/auth";


  
  export default {
    name: "ComplexTable",
    directives: { waves },
    filters: {
      statusFilter(status) {
        const statusMap = {
          published: "success",
          draft: "info",
          deleted: "danger",
        };
        return statusMap[status];
      },
      typeFilter(type) {
        return calendarTypeKeyValue[type];
      },
    },
    queryParams: {
      name: "",
    },
    
    data() {
      return {
        queryParams: {
          name: "",
        },
        rules: {
          dayFree: [
              { required: true, message: '请选择占位收费时间', trigger: 'change' }
            ],
          nightFree: [
              { required: true, message: '请选择占位收费时间', trigger: 'change' }
            ]      
        },
        
        roleIndex: true,
        dialogTitle: "添加会员",
        addDialog: false,
        radio:'',
        radio1:'',
        openId:'',
       
        memberVisible:false,
        addDialog2: false,
        labelWidth: "120px",
        form: {},
        cardNo:'',
        memberStatus:'',
        parkfieldIds:'',
        phone:'',
        parkfieldNo:'',
        hours: [1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22,23,24],
        roleIndex: true,
        multipleSelection: [],
        tableKey: 0,
        list: [],
        name:'',
        parkfieldList: [],
        total: 0,
        promotionDialogTitle: "",
        promotionDialog: false,
        editFeeDialog: false,
        feeForm: {
          freeTime: 0,
          occupiedFee: "",
          electricFee: "",
          oriFee: "",
          serviceFee: "",
          startTime1: "",
          endTime1: "",
          electricFee1: "",
          startTime2: "",
          endTime2: "",
          electricFee2: "",
          startTime3: "",
          endTime3: "",
          electricFee3: "",
          startTime4: "",
          endTime4: "",
          electricFee4: ""
        },
        depositAmount:'',
        bonusAmount:'',
        timeSharing: false,
        //  sortable:true,
        currentPage: 1,
        title:"",
        pageSizes: [10, 20, 40],
        pageNo: 1,
        pageSize: 20,
        listLoading: true,
        listQuery: {
          pageNo: 1,
          pageSize: 41,
          name: undefined,
          phone: undefined,
          number: undefined,
          sort: "+id",
        },
        form:{
            parkfieldId:''
        },
        managerList:'',
        importanceOptions: [1, 2, 3],
    
        showReviewer: false,
        temp: {
          id: undefined,
          importance: 1,
          remark: "",
          timestamp: new Date(),
          title: "",
          type: "",
          status: "published",
        },
        dialogFormVisible: false,
        dialogStatus: "",
        textMap: {
          update: "编辑",
          create: "Create",
        },
        searchVal: "", //默认输入为空
        letter: "", //默认不排序
        original: false, //默认从小到大排列
        dialogPvVisible: false,
        pvData: [],
        key:"",
        downloadLoading: false,
      };
    },
  


    mounted: function () {
      this.key = localStorage.getItem("key");
      this.title = localStorage.getItem("title");
      this.loadParkfields()
      this.chargemember(this.pageNo, this.pageSize)
      this.$nextTick(function () {
        this.lcplateparkfield(this.pageNo, this.pageSize);
      });
    },
  
    computed: {
      userState () {
        return getNickName() === getTestUserName();
      }
    },
    
  
    methods: {
      tableRowClassName({ row, rowIndex }) {
        if (rowIndex % 2 == 0) {
          return "warning-row";
        }
        return "";
      },
      getSortClass: function (key) {
      const sort = this.listQuery.sort;
      return sort === `+${key}` ? "ascending" : "descending";
    },
    handleCreate() {
      this.dialogFormVisible = true
      
    },
    lcdepositrecord(){
      var _this = this

      if(_this.depositAmount == "" || _this.depositAmount == null || _this.bonusAmount == "" || _this.bonusAmount == null){
        this.$alert('请输入充值金额或赠送金额！', '充值失败', {
                      confirmButtonText: '确定',});
                      return false
      }else if(_this.depositAmount > 2000){
        this.$alert('充值金额不能大于2000！', '充值失败', {
                      confirmButtonText: '确定',});
                      return false
      }else if(_this.bonusAmount > 2000){
        this.$alert('赠送金额不能大于2000！', '充值失败', {
                      confirmButtonText: '确定',});
                      return false
      }

      lcdepositrecordApi({
          depositAmount:_this.depositAmount,
          openId: _this.openId,
          bonusAmount:_this.bonusAmount,
        }).then((resp) => {
          if (resp.errmsg === "ok") {
      
                this.$notify({
                  title: "成功",
                  message: "充值成功",
                  type: "success"
                });
            
                _this.memberVisible = false
              } else {
                this.$alert('充值失败', '充值失败', {
                confirmButtonText: '关闭',});
  
                _this.$notify({
                  title: "失败",
                  message: "充值失败",
                  type: "error"
                });
              }
        })

    },
    handleDelete(row){

      this.$confirm('是否删除该方案?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          

          handleDeleteApi({
          id:row.id,
        }).then((resp) => {
          if (resp.errmsg === "ok") {
      
                this.$notify({
                  title: "成功",
                  message: "删除成功",
                  type: "success"
                });
                this.chargemember(this.pageNo, this.pageSize);
              } else {
                this.$alert('删除失败', '删除失败', {
                confirmButtonText: '关闭',});
  
                _this.$notify({
                  title: "失败",
                  message: "删除失败",
                  type: "error"
                });
              }
        })

        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });          
        });





       
    },
    handleUpdate(row) {

      let _this = this;
      
      _this.phone = row.phone;
      _this.cardNo = row.cardNo;
      _this.parkfieldIds = row.parkfieldIds;
      _this.openId = row.openId;
      _this.memberVisible = true
    },
    updateParkfield(){
        var _this = this;
    if(_this.name == '' || _this.name == null){
        this.$alert('姓名不能为空！', '提示', {
                confirmButtonText: '关闭',});
       return false
    }else if(_this.phone == '' || _this.phone == null){
        this.$alert('手机号不能为空！', '提示', {
                confirmButtonText: '关闭',});
       return false
    }else if(_this.cardNo == '' || _this.cardNo == null){
        this.$alert('身份证号不能为空！', '提示', {
                confirmButtonText: '关闭',});
       return false
    }else if(_this.parkfieldIds == '' || _this.parkfieldIds == null){
        this.$alert('停车场不能为空！', '提示', {
                confirmButtonText: '关闭',});
       return false
    }else{
    }

    let a= _this.parkfieldIds
    let b=  a.join(',') 
    lcchargememberApi({
          pageNo:_this.pageNo,
          pageSize: _this.pageSize,
          roleCode:_this.key,
          cardNo:_this.cardNo,
          phone:_this.phone,
          name:_this.name,
          parkfieldIds:b
        }).then((resp) => {
          if (resp.errmsg === "ok") {


            if(resp.data === 'phone.not.exist'){
                this.$alert('请在微信上关注一步充电小程序，扫码授权手机号', '添加失败', {
                confirmButtonText: '关闭',});
              return false
            }else{
                this.$notify({
                  title: "成功",
                  message: "添加成功",
                  type: "success"
                });
                this.chargemember(this.pageNo, this.pageSize);
            }

                _this.dialogFormVisible = false
              } else {
                _this.$notify({
                  title: "失败",
                  message: "添加失败",
                  type: "error"
                });
              }
        })

    },
  
       timeSharingChange () {
        let _this = this;
    //    console.log(_this.timeSharing)
      },
      sub(value) {
        if (value === null || undefined) {
          return "";
        } else {
          value = value.substring(0, 16);
          return value;
        }
      },
      sortByPurchase(obj1, obj2) {
        var a = obj1.electricFee2;
        var b = obj2.electricFee2;
        return a - b;
      },
      totalParkfield(e){
        console.log(this.parkfieldIds)
        if(this.parkfieldIds.indexOf(this.key) != -1){
      this.parkfieldIds = [this.key]
        }else{
        }
    },
   
      loadParkfields () {
      let _this = this
        loadParkfieldsApi(
          {roleCode:_this.key}
        ).then(function (resp) {
          if (resp.errmsg === 'ok') {
            _this.parkfieldList = resp.data.dataList
          }
        })
        .catch(function (e) {
          console.log(e)
        })
    },

  
      //列表页码的触发事件
      handlePageChange(pageSize) {
        this.pageSize = pageSize;
        this.chargemember(this.pageNo, this.pageSize);
      },
      handleNoChange(pageNo) {
        this.pageNo = pageNo;
        this.chargemember(this.pageNo, this.pageSize);
      },
      handleTableChange(val) {
        this.multipleSelection = val;
      },
      chargemember(pageNo, pageSize) {
        let _this = this;
        _this.loading = true;
        chargememberApi({
          pageNo: pageNo,
          pageSize: pageSize,
          roleCode:_this.key
        }).then((response) => {
          _this.list = response.data.dataList;
          _this.total = response.data.totalNum;
          setTimeout(() => {
            _this.listLoading = false;
          }, 1 * 1000);
        });
      },
      queryBtn() {
        let _this = this;
  
        chargememberApi({
          pageNo: _this.pageNo,
          pageSize: _this.pageSize,
          phone:_this.phone,
          roleCode:_this.key
        }).then((response) => {
          _this.list = response.data.dataList;
          _this.total = response.data.totalNum;
          setTimeout(() => {
            _this.listLoading = false;
          }, 1 * 1000);
        });
      },
  
    
  
    }
  

  
  };
  
  
  
  </script>
  
  
  